<template>
  <div>
    <h2>{{ counter }}</h2>
    <button @click="increment">+1</button>
    <h2 class="title" ref="titleRef">{{ message }}</h2>
    <button @click="addMessageContent">添加内容</button>
  </div>
</template>

<script>
// console.log("主线程");

// new Promise((resolve, reject) => {
//   console.log("1");
//   resolve();
// }).then((res) => {
//   console.log("2");
//   setTimeout(() => {
//     console.log("5");
//   });

//   new Promise((resolve, reject) => {
//     console.log(1111111111);
//     setTimeout(() => {
//       console.log("3");
//     });

//     resolve();
//   }).then((res) => {
//     console.log("4");
//   });
// });

// setTimeout(() => {
//   console.log("主线程的setTimeout");
// });
import { ref, nextTick } from "vue";
export default {
  setup() {
    const message = ref("");
    const titleRef = ref("null");

    const counter = ref(0);
    const increment = () => {
      for (let i = 0; i < 100; i++) {
        counter.value++;
      }
    };
    const addMessageContent = () => {
      message.value += "哈哈哈哈哈哈哈哈哈";

      nextTick(() => {
        console.log(titleRef.value.offsetHeight);
      });
    };

    return {
      message,
      counter,
      increment,
      addMessageContent,
      titleRef,
    };
  },
};
</script>

<style scoped>
.title {
  width: 120px;
}
</style>